<template>
	<view class="content submitC">
		<view class="submit-info1">
			<view class="info1-item flex-between">
				<view class="info1-left font30">
					<text class="info-default">*</text>
					<text>部门</text>
				</view>
				<view class="info1-right">
					{{userInfo.ou_name}}
				</view>
			</view>
			<view class="info1-item flex-between">
				<view class="info1-left">
					<text class="info-default">*</text>
					<text>申请人姓名</text>
				</view>
				<view class="info1-right">
					{{userInfo.user_name}}
				</view>
			</view>
			<view class="info1-item">
				<view class="info1-left">
					<text class="info-default">*</text>
					<text>{{typeid==16?'销假':'补卡'}}事由</text>
				</view>
				<view class="info1-right">
					<textarea class="font28" value="" :placeholder="typeid==16?'请输入销假事由':'请输入补卡事由'"
						@input="inputText" />
				</view>
			</view>
		</view>
<!-- 		<picker v-if="title != '补卡申请'" @change="bindPickerChange" range-key="name" :value="index" :range="personList">
			<view class="submit-info2">
				<view class="info2-item flex-between">
					<view class="info2-left">
						<text class="info-default"></text>
						<text>接替人姓名</text>
					</view>
					<view class="info2-right flex-right">
						<text :style="name!=''?'color:#000':''">{{name!=''?name:'请选择'}}</text>
						<image src="../../static/img/more-ico2.png" mode=""></image>
					</view>
				</view>
			</view>
		</picker> -->
		<!-- 补卡的班次 -->
		<view class="submit-info2">
			<view class="info2-item flex-between" @click="openTime">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>{{typeid==16?'销假':'补卡'}}班次</text>
				</view>
				<view class="info2-right flex-right">
					<text :style="showText!=''?'color:#000':''">{{showText!=''?showText:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 补卡的时间 -->
		<view class="submit-info2" v-if="typeid != 16">
			<view class="info2-item flex-between" @click="openChangeTime">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>{{typeid==16?'销假':'补卡'}}时间</text>
				</view>
				<view class="info2-right flex-right">
					<text :style="changeTime!=''?'color:#000':''">{{changeTime!=''?changeTime:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="submit-info3 boxS" style="padding-right: 20%;">
			<uni-file-picker limit="3" title="(最多可上传3张)" :auto-upload="false" @select="select" @progress="progress"
				@delete="deletes" />
		</view>

		<!-- 流程 -->
		<view class="detail-processN boxS">
			<view class="process-title">
				<text class="font30">流程</text>
			</view>
			<view class="process-list">
				<block v-for="(iPrev,index1) in processList" :key="index1">
					<view class="process-item flex-between">
						<view class="process-left flex-left">
							<view class="process-dian"></view>
							<view class="process-text">
								<text class="font28">{{iPrev.process_name}}</text>
								<text class="font24">{{iPrev.examine_member.length}}人协同审批</text>
							</view>
						</view>
						<view class="process-right">
							<view class="flex-right" :style="{'width':iPrev.width,'min-width':'100%'}">
								<block v-for="(item,index2) in iPrev.examine_member" :key="index2">
									<view class="process-people flex-right">
										<view class="process-add">
											+
										</view>
										<view class="people-cont">
											<image :src="!item.cover?'../../static/img/photo.png':item.cover"></image>
											<view class="process-name">
												<text class="font24">{{item.user_name}}</text>
											</view>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 操作 -->
		<view class="detail-btn boxS flex-between">
			<view class="btn1 font32" hover-class="btns" @click="submitInfo">
				提交
			</view>
		</view>


		<w-picker :visible.sync="visible" mode="selector" value="" default-type="" :default-props="defaultProps"
			:options="cardList" @confirm="onConfirm($event,'selector')" @cancel="onCancel" ref="selector"></w-picker>

		<w-picker :visible.sync="shortTermVisible" :startYear=startYear :endYear=endYear :value="nowTime"
			:current="false" fields="minute" @confirm="onConfirmS($event,'date1')" @cancel="onCancel"
			:disabled-after="false" ref="shortTerm"></w-picker>

		<lzLoading :showloading='showLoading'></lzLoading>

	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				title: '', //补卡申请不要接替人
				index: '',
				value: '',
				shortTermVisible: false, //时间选择
				visible: false, //班次选择
				result: {
					result: ""
				},
				nowTime: '',

				sTime: '',
				startTime: '',
				endTime: '',
				textInput: '', //事由

				typeid: '', //申请id
				processList: '', //审批列表 
				showLoading: true,

				imgList: [], //图片列表
				cardList: [], //缺卡列表
				successor_id: '', //接替人id 接替人名字
				successor_name: '', //接替人名字
				name: '',
				personList: [],
				defaultProps: {
					"label": "punch_time",
					"value": "id"
				},

				showText: '', //补卡班次
				showId: '', //补卡id
				changeTime: '', //需要改变的时间

				selectId: '' // 选择的补卡id
			};
		},

		computed: {
			userInfo() {
				return uni.getStorageSync("USERINFO")
			},
			startYear() {
				return this.$util.formatTime('now', 'Y') * 1 - 2
			},
			endYear() {
				return this.$util.formatTime('now', 'Y') * 1 + 2
			}
		},

		onLoad(options) {
			this.typeid = options.id
			if (options.name) {
				this.title = options.name
				//设置标题
				uni.setNavigationBarTitle({
					title: options.name
				})
			}
			if (options.day) {
				this.selectId = options.day
			}
		},

		onShow() {
			if (uni.getStorageSync("USERINFO").ou_id) {
				this.$api.getDeptUser({
					ou_id: uni.getStorageSync("USERINFO").ou_id
				}, true, (res) => {
					this.personList = res.map(ele => {
						return {
							...ele,
							name: `${ele.user_name}(${ele.user_id})`
						}
					})
					console.log(this.personList, 256)
				}, err => {
					console.log(err, 222);
					this.showLoading = false
				})
			}
			Promise.all([this.getProcess(), this.getMakeupCard()]).then((t) => {
				let sett = setTimeout(() => {
					this.showLoading = false
				}, 500)
			}).catch((err) => {
				console.log(err)
				this.showLoading = false
			})
		},
		methods: {
			bindPickerChange: function(e) {
				this.successor_id = this.personList[e.detail.value].user_id
				this.successor_name = this.personList[e.detail.value].user_name
				this.name = this.personList[e.detail.value].name
			},
			//表单提交
			submitInfo() {
				if (this.typeid == 16) {
					//销假提交
					if (this.showId == '') {
						//销假
						uni.showToast({
							title: "请选择销假时间",
							icon: "none"
						})
						return
					}

					if (this.textInput == '') {
						uni.showToast({
							title: "请输入销假事由",
							icon: "none"
						})
						return
					}

					uni.showLoading({
						title: "提交中"
					})
					this.$api.uploadFile(this.imgList, (resoult) => {
						//表单提交
						this.$api.postSbumitInfo({
							punch_record_id: this.showId,
							start_time: this.changeTime,
							end_time: '',
							approve_type_id: this.typeid,
							reason: this.textInput,
							image: resoult,
						}, true, (res) => {
							uni.showToast({
								title: '提交成功',
							})
							uni.navigateBack({
								delta: 1
							});
						})
						uni.hideLoading()
					})
				} else {
					//补卡提交
					if (this.showId == '') {
						//补卡
						uni.showToast({
							title: "请选择补卡时间",
							icon: "none"
						})

						return
					}
					if (this.textInput == '') {
						uni.showToast({
							title: "请输入请假事由",
							icon: "none"
						})
						return
					}

					uni.showLoading({
						title: "提交中"
					})
					this.$api.uploadFile(this.imgList, (resoult) => {
						//表单提交
						this.$api.postSbumitInfo({
							punch_record_id: this.showId,
							start_time: this.changeTime,
							end_time: '',
							approve_type_id: this.typeid,
							reason: this.textInput,
							image: resoult,
							successor_id: this.successor_id,
							successor_name: this.successor_name,
						}, true, (res) => {
							uni.showToast({
								title: '提交成功',
							})
							uni.navigateBack();
						})
						uni.hideLoading()
					})
				}


			},

			//获取审批流程
			getProcess() {
				return new Promise((resolve, reject) => {
					this.$api.getProcess({
						flow_id: this.typeid
					}, true, (res) => {
						for (let i in res.process) {
							res.process[i].width = (res.process[i].examine_member.length * 1 * 160 - 100) +
								'rpx'
						}
						this.processList = res.process
						resolve("success")
					})
				})
			},

			//获取可缺卡/销假记录
			getMakeupCard() {
				if (this.typeid == 16) {
					//销假
					return new Promise((resolve, reject) => {
						this.$api.getTimeCard({
							flow_id: this.typeid
						}, true, (res) => {
							if (res.list.length > 0) {
								for (let i in res.list) {
									res.list[i].punch_time = this.$util.formatTime(res.list[i].start_time,
										'Y-M-D') + " ~ " + this.$util.formatTime(res.list[i].end_time,
										'Y-M-D') + "  " + res.list[i].type_name
								}
							}
							this.cardList = res.list
							resolve("success")
						})
					})
				} else {
					//缺卡
					return new Promise((resolve, reject) => {
						this.$api.getMakeupCard({
							flow_id: this.typeid
						}, true, (res) => {
							if (res.list.length > 0) {
								for (let i in res.list) {
									if (res.list[i].punch_time.length < 16) {
										res.list[i].punch_time = res.list[i].punch_time.slice(0, 11) +
											'0' +
											res.list[i].punch_time.slice(11)
									}
									//选择了补卡时间
									if (this.selectId != '') {
										if (this.selectId == res.list[i].id) {
											this.showText = res.list[i].punch_time
											this.showId = res.list[i].id
											this.changeTime = ''
										}
									}
								}
							}
							this.cardList = res.list
							resolve("success")
						})
					})
				}
			},

			//文字输入
			inputText(e) {
				this.textInput = e.detail.value
			},
			//图片上传成功
			select(res) {
				this.imgList.push(...res.tempFilePaths)

			},
			//移除图片
			deletes(res) {
				this.imgList.splice(res.tempFilePath, 1)
			},
			//图片上传进度
			progress(e) {
				console.log('上传进度', e)
			},

			//打开班次选择
			openTime(val) {
				this.visible = true
			},
			onConfirm(res, type) {
				console.log(res)
				this.showText = res.result
				this.showId = res.obj.id
				this.changeTime = ''
			},
			//打开时间选择
			openChangeTime(val) {
				if (this.showText == '') {
					wx.showToast({
						title: '请选择补卡班次',
						icon: 'none'
					})
					return
				} else {
					this.shortTermVisible = true
					this.nowTime = this.showText
				}
			},

			onConfirmS(res, type) {
				this.changeTime = res.result;
			},
			onCancel() {

			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		.flex-right {
			image {
				width: 12rpx;
				height: 19rpx;
				margin-left: 20rpx;
			}
		}

		background: #fafafa;

		.submitC {
			padding-top: 30rpx;

			.info-default {
				color: red;
				margin-right: 5rpx;
			}

			.submit-info1 {
				background: #fff;
				padding: 15rpx 4%;

				.info1-item {
					padding: 15rpx 0;

					.info1-left {
						font-weight: 500;
						color: #454545;
					}

					.info1-right {
						textarea {
							background: #FAFAFA;
							width: 100%;
							padding: 30rpx;
							width: 92%;
							margin-top: 20rpx;
							min-height: 100rpx;
							border-radius: 10rpx;
							height: auto;
						}
					}

				}
			}

			.submit-info2 {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;

				.info2-item {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #E6E6E6;

					&:last-child {
						border: none;
					}

					.info2-left {
						font-weight: 500;
						color: #454545;
					}

					.info2-right {
						width: 72%;
						color: #ABABAB;

						image {
							width: 12rpx;
							height: 19rpx;
							margin-left: 20rpx;
						}

						input {
							width: 100%;
							text-align: left;
						}

						textarea {
							background: #FAFAFA;
							width: 100%;
							padding: 30rpx;
							width: 92%;
							margin-top: 20rpx;
							min-height: 100rpx;
							border-radius: 10rpx;
							height: auto;
						}
					}
				}
			}

			.submit-info3 {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				padding-bottom: 30rpx;

				.info3-title {
					padding: 30rpx 0;
					font-weight: bold;
					color: #454545;

					text {
						&:last-child {
							font-weight: 500;
							color: #787878;
							margin-left: 15rpx;
						}
					}
				}

				.info3-item {
					width: 140rpx;
					height: 140rpx;
					border: 1rpx solid #E6E6E6;
					border-radius: 7rpx;
					margin-left: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info3-upload {
					width: 140rpx;
					height: 140rpx;
					background: #FAFAFA;
					border: 1rpx solid #E6E6E6;
					border-radius: 7rpx;
					text-align: center;

					image {
						margin: auto;
						width: 43rpx;
						height: 43rpx;
					}

					text {
						display: block;
						color: #008AFF;
					}
				}
			}

			.detail-process {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				align-items: flex-start;
				padding-bottom: 150rpx;

				.process-title {
					padding: 30rpx 0;
				}

				.process-item {
					padding-bottom: 80rpx;
					position: relative;

					.process-more {
						height: 88rpx;
						line-height: 88rpx;
						font-weight: bold;
						font-size: 50rpx;
						padding: 0 10rpx;
					}

					&:after {
						position: absolute;
						top: 100rpx;
						left: 40rpx;
						content: "";
						width: 3rpx;
						height: 60rpx;
						background: #E6E6E6;
						border-radius: 1rpx;
					}

					&:last-child {
						padding-bottom: 30rpx;

						&:after {
							background: none;
						}

					}

					.item-img {
						width: 88rpx;
						height: 88rpx;
						border-radius: 7rpx;
						margin-right: 20rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item-name {
						font-weight: bold;
						color: #454545;

						text {
							display: block;
							width: 100%;

							&:last-child {
								font-weight: 500;
								color: #454545;
								margin-top: 10rpx;
							}
						}
					}

					.item-state {
						margin-top: 20rpx;
					}

					.item-right {
						color: #ABABAB;
					}

					.item-left {
						&:last-child {
							.process-more {
								display: none;
							}
						}

					}
				}
			}

			.detail-processN {
				margin-top: 30rpx;
				background: #fff;

				align-items: flex-start;
				padding-bottom: 170rpx;

				.process-title {
					padding: 30rpx 4%;
					font-weight: bold;
					color: #454545;
				}

				.process-item {
					padding: 30rpx 4%;
					position: relative;
					border-bottom: 1rpx solid #eee;

					&:before {
						content: "";
						position: absolute;
						top: 0;
						left: 40rpx;
						width: 3rpx;
						height: 50%;
						background: #008AFF;
					}

					&:after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 40rpx;
						width: 3rpx;
						height: 50%;
						background: #008AFF;
					}

					&:first-child {
						padding-top: 0;

						&:before {
							display: none;
						}
					}

					&:last-child {
						border-bottom: none;
						padding-bottom: 0;

						&:after {
							display: none;
						}
					}

					.process-left {
						width: 30%;
						color: #454545;

						.process-dian {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #008AFF;
							margin-right: 25rpx;
						}

						.process-text {
							text {
								display: block;

								&:last-child {
									color: #454545;
									margin-top: 7rpx;
								}
							}
						}
					}

					.process-right {
						width: 70%;
						overflow-x: scroll;
						overflow-y: hidden;
						text-align: right;
						
						image {
							width: 88rpx;
							height: 88rpx;
							border-radius: 10rpx;
						}

						.process-name {
							line-height: 25rpx;
							text-align: center;
							color: #454545;
							margin-top: -5rpx;
						}

						.process-add {
							font-size: 40rpx;
							font-weight: blod;
							margin-top: -35rpx;
							padding: 0 15rpx;
							color: #454545;
						}

						.process-people {
							&:first-child {
								.process-add {
									display: none;
								}
							}
						}
					}
				}
			}

			.detail-btn {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 92%;
				padding: 30rpx 4%;
				background: #fff;

				.btn1 {
					width: 100%;
					background: #008AFF;
					border-radius: 44rpx;
					text-align: center;
					font-weight: bold;
					color: #FFFFFF;
					padding: 20rpx 0;
				}
			}
		}
	}
</style>
